<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
    v-model收集数据的注意点：
    v-model提供了修饰符
        trim 去除首位空格
        number 将字符串转为有效数字
    默认情况下 复选框收集的是boolean的值 选中 收集为true 没选中一般为false
    如果要收集选中提交的多个值 必须将对象的接受改为数组  并且value有值
       lazy 懒加载   等待光标失去后才将数据提交到data的模型里  节约资源

    -->
    <form>
        账号：<input type="text" v-model.trim="user.account"> <br>
        密码：<input type="password" v-model="user.password"> <br>
        年龄：<input type="number" v-model.number="user.age"> <br>
        性别：
        <input type="radio" name="sex" value="man" v-model="user.sex"> 男
        <input type="radio" name="sex" value="women" v-model="user.sex"> 女
        <br>
        爱好：
        <input type="checkbox" value="study" v-model="user.hobby">学习
        <input type="checkbox" value="game" v-model="user.hobby">游戏
        <input type="checkbox" value="eat" v-model="user.hobby">吃饭
        <br>
        毕业学校：
        <select v-model="user.school">
            <option value="">请选择学校</option>
            <option value="lg">理工</option>
            <option value="yd">云大</option>
            <option value="ykd">医科大</option>
        </select>
        <br>
        其他补充：
        <textarea v-model.lazy="user.others"></textarea> <br>
        <button>提交</button>

    </form>



</div>

</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                /*定义数据模型收集表单数据*/
               user:{
                   account:'',//账号
                   password:'',//密码
                   age:0,//年龄
                   sex:'',//性别
                   hobby:[],//爱好
                   school:'',//学校
                   others:''//其他信息
               }
            }
        },
        methods:{
            send(){

            }
        }
    });
</script>